<template>
  <!-- 首页的主要内容区域 -->
  <div class="index-page">
    <!-- 页面主体内容 -->
    <div class="body">
      <!-- 英雄区域，展示主要信息和图片 -->
      <section class="hero">
        <!-- 英雄内容区域，包括标题、副标题、描述和标签 -->
        <div class="hero-content">
          <h1>安睿智家</h1>
          <p class="sub-title">anrui smart home</p>
          <p class="description">
            专注于智慧养老，旨在通过科技手段提升老年人的生活质量，结合智能硬件与软件服务，为老年人及其家属提供全方位的健康管理与生活支持。
          </p>
          <div class="tags">
            <span class="tag tag-efficient">高效</span>
            <span class="tag tag-fast">快捷</span>
            <span class="tag tag-safe">安心</span>
          </div>
        </div>
        <!-- 英雄图片区域 -->
        <div class="hero-image">
          <img src="../assets/images/蒙版组%202.png" alt="欢乐的老人">
        </div>
      </section>

      <!-- 特征区域，展示产品的主要特点 -->
      <section class="features">
        <!-- 每个特征项 -->
        <div class="feature-item">
          <img src="../assets/images/蒙版组%203.png" alt="智能监控">
          <h3>智能监控</h3>
        </div>
        <div class="feature-item">
          <img src="../assets/images/蒙版组%204.png" alt="社区管理">
          <h3>社区管理</h3>
        </div>
        <div class="feature-item">
          <img src="../assets/images/蒙版组%205.png" alt="家居签约">
          <h3>家居签约</h3>
        </div>
        <div class="feature-item">
          <img src="../assets/images/蒙版组%206.png" alt="智能音箱">
          <h3>智能音箱</h3>
        </div>
      </section>

      <!-- 服务区域，动态展示服务项目 -->
      <section class="services">
        <!-- 服务项，使用v-for指令遍历services数组 -->
        <div class="service-item" v-for="service in services" :key="service.title">
          <img :src="service.image" :alt="service.title">
          <p>{{ service.title }}</p>
        </div>
      </section>
    </div>
  </div>
</template>

<script setup>
// 定义服务数组，包含服务项目的标题和图片路径
const services = [
  { title: "智能监控", image: "../assets/images/蒙版组%203.png" },
  { title: "社区管理", image: "../assets/images/蒙版组%204.png" },
  { title: "家床签约", image: "../assets/images/蒙版组%205.png" },
  { title: "智能音箱", image: "../assets/images/蒙版组%206.png" }
];
</script>

<style scoped lang="scss">
// 首页的整体样式
.index-page {
  height: 100vh;
  overflow: auto;
  padding: 20px;
}

// 英雄区域的样式
.hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 40px;
  background: linear-gradient(to right, #f9fafc, #ffffff);
}

// 英雄内容区域的样式
.hero-content {
  max-width: 480px;
}

// 英雄图片样式
.hero-image img {
  max-width: 420px;
  border-radius: 12px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

// 标签区域样式
.tags {
  display: flex;
  gap: 12px;
}

// 标签样式
.tag {
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: bold;
  color: white;
}

// 不同标签的背景颜色
.tag-efficient { background-color: #4caf50; }
.tag-fast { background-color: #ff9800; }
.tag-safe { background-color: #2196f3; }

// 服务区域样式
.services {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  padding: 40px;
}

// 每个服务项的样式
.service-item {
  text-align: center;
  background-color: #ffffff;
  border-radius: 12px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
  padding: 20px;
  transition: transform 0.3s ease;
}

// 服务项悬浮效果
.service-item:hover {
  transform: translateY(-5px);
}

// 服务项图片样式
.service-item img {
  max-width: 100%;
  border-radius: 10px;
  margin-bottom: 10px;
}

// 特征区域样式
.features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  margin-top: 20px;
}

// 每个特征项样式
.feature-item {
  background: white;
  border-radius: 10px;
  padding: 15px;
  text-align: center;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s;
}

// 特征项悬浮效果
.feature-item:hover {
  transform: scale(1.05);
}

// 特征项图片样式
.feature-item img {
  width: 80%;
  border-radius: 10px;
}
</style>
